import React, { useEffect, useState } from 'react'
import { IndexBar, NavBar, Cell } from 'react-vant'
import { useNavigate } from "react-router-dom"
import citylist from "../uilst/cities.json"

type Props = {}

const Address = (props: Props) => {
  const charCodeOfA = 'A'.charCodeAt(0)
  const navigate = useNavigate()
  const [Addresslist, setAddresslist]: any = useState([])
  useEffect(() => {
    setAddresslist(citylist.cityList)
  })
  
  const tohome = (val: any) => {
    console.log(val);
    localStorage.setItem("address", val)
    navigate("/home/home")
  }
  return (
    <div className='Address'>
      <NavBar
        title="出发地"
        leftText="返回"
        onClickLeft={() => navigate(-1)}
      />
      <IndexBar>
        {Addresslist && Addresslist.map((val: any, i: any) => (
          <div key={i}>
            <IndexBar.Anchor index={val.title} />
            {
              val.citys && val.citys.map((item: any, index: any) => {
                return <Cell title={item.name} key={index} onClick={() => { tohome(item.name) }} />
              })
            }


          </div>
        ))}
      </IndexBar>

    </div>
  )
}

export default Address